<template>
  <el-container class="is-vertical">
    <public-header></public-header>
    <el-row :gutter="20">
      <span class="auth-top">在进入系统之前，请先授权绑定微信公众号</span>
    </el-row>
    <div class="app-container contain-center">
      <el-row class="auth-content">
        <div>公众号需开通功能和权限：</div><br>
        <div>
          <p>1、微信门店功能</p>
          <p class="txt-idt">微信连Wi-Fi的前提条件，具备门店</p>
          <p>2、微信连Wi-Fi功能</p>
          <p class="txt-idt">触云平台公众号吸粉通过Wi-Fi连接渠道</p>
          <p>3、消息管理权限</p>
          <p>4、网页服务权限</p>
          <p>5、用户管理权限 (非必选)</p>
        </div>
      </el-row>
      <hr>
      <el-row class="auth-content">
        <div class="title">如何开通门店小程序？</div><br>
        <div>1.登录微信公众平台：https://mp.weixin.qq.com </div>
        <div>2.登录成功后，点击左侧功能-添加功能插件。</div>
        <div><img src="../../../static/images/wx-01.png"></div>
        <div>3.找到门店小程序并开通</div>
        <div><img src="../../../static/images/wx-02.png"></div>
        <div><img src="../../../static/images/wx-03.png"></div>
        <div>4.用管理员的微信扫一下并点击下一步，并填写商家信息。</div>
        <div><img src="../../../static/images/wx-04.png"></div>
        <div>5.提交申请，等待审核，审核通过后即开通完成。</div>
        <div><img src="../../../static/images/wx-05.png"></div>
      </el-row>
      <hr>
      <el-row class="auth-content">
        <div class="title">如何开通微信连WiFi？</div><br>
        <div>1.登录微信公众平台：https://mp.weixin.qq.com</div>
        <div>2.登录成功后，点击左侧功能-添加功能插件。</div>
        <div><img src="../../../static/images/wx-06.png"></div>
        <div>3.在功能插件中找到微信连WiFi，点击。</div>
        <div><img src="../../../static/images/wx-07.png"></div>
        <div>4.点击微信连WiFi后，进入功能详情页面，找到【开通】按钮</div>
        <div><img src="../../../static/images/wx-08.png"></div>
        <div>5.点击【开通】，进入通知页面，阅读完通知拉到页面底部，可看到【同意】按钮，点击【同意】按钮。</div>
        <div><img src="../../../static/images/wx-09.png"></div>
      </el-row>
    </div>
    <el-row class="a-bottom">
      <el-row class="p-btn">
        <a class="btn-auth" target="_blank" :href="baseUrl">去授权</a>
        <span>我已满足以上条件</span>
      </el-row>
    </el-row>
  </el-container>
</template>

<script>
  // import ajax from '@/utils/ajax'
  import PublicHeader from '@/components/PublicHeader'
  export default {
    name: 'authorize',
    components: {
      PublicHeader
    },
    data() {
      return {
        baseUrl: process.env.BASE_API + '/authorize'
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .contain-center{
    margin: 0 auto;
    text-align: center;
  }
  .auth-top{
    display: inline-block;
    height: 105px;
    line-height: 105px;
    text-align: center;
    padding-left: -30px!important;
    margin:20px 30px 0;
    background-color: #f0f9f7;
    width:97%;
    font-size: 20px;
    font-weight: bold;
    color: #00876e
  }

  .auth-content{
    padding-top: 30px;
    padding-left: 60px;
    text-align: left;
    div{
      margin-top: 20px;
      color: #666666;
      &:first-of-type {
        text-align: left;
        color: #333333;
        font-weight: bold;
        font-size: 20px;
      }
    }
    .txt-idt{
      text-indent: 25px;
    }
    hr{
      border:.5px dashed #9a9a9a;
      width:80%;
      margin-left: -20px
    }
  }
  .grid-content {
    height: 100%;
    line-height: 50px;
    text-align: center;
  }
  .fans-count{
    text-align: center;
    font-size: 24px;
    color: #000;
  }
  .content{
    margin-top: 50px;
    text-align: center;
    height: 300px;
  }
  .desc{
    margin-top: 20px;
  }
  .blue{
    color: #0586e1;
  }
  .a-bottom {
    height: 100px;
    background-color: #f4f4f4;
    width: 100%;
    position: fixed;
    bottom: 0;
    .p-btn{
      margin-left: 100px;
      padding-top: 30px;
      color: #888888;
      margin-left: 30%;
    }
    .btn-auth{
      display:inline-block;
      background-color: #00cea5;
      margin-right: 15px;
      text-align: center;
      line-height: 45px;
      color:#fff;
      margin-left: 100px;
      width:135px;
      height:45px;
      font-weight: 600;
      font-size: 20px;
      border-radius: 5px;
    }
  }
</style>
